<template>
	<view class="btn-contant">
		<view>
			<button @click="clickClaim" type="primary" v-if="isClaim === 'false' && parentTaskId == 'null'">签收</button>
			<button @click=" submit" type="primary" v-if="isClaim === 'null' || isClaim === 'true'">{{submitText}}</button>
		</view>
		<view v-if="isClaim === 'true' && parentTaskId == 'null'">
			<button @click="returnTask" type="primary" v-if="isClaim === 'true' && parentTaskId == 'null'">归还</button>
		</view>
		<view>
			<button @click="staging()" type="default">{{stagingText}}</button>
		</view>
		<view v-if="taskId">
			<button @click="record" type="default">审批记录</button>
		</view>
		<slot />

		<!-- 审批记录组件 -->
		<processRecord ref="processRecordRef" />
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/common'
	import taskApi from "@/api/workflow/task.js"

	import processRecord from '@/components/process/process-record/process-record.vue'
	export default {
		components: {
			processRecord
		},
		props: {
			parentTaskId: String,
			isClaim: String,
			taskId: String,
			processInstanceId: String,
			submitText: {
				type: String,
				default: '提交'
			},
			stagingText: {
				type: String,
				default: '暂存'
			}
		},
		data() {
			return {

			}
		},
		watch: {
			parentTaskId: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.parentTaskId = newVal
					}
				},
				immediate: true,
				deep: true
			},
			isClaim: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.isClaim = newVal
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			submit() {
				this.$emit("submit")
			},
			staging() {
				this.$emit("staging")
			},
			//签收
			clickClaim() {
				taskApi.claim(this.taskId).then(response => {
					toast("签收成功")
					this.$emit("claimCallBack")
				})
			},
			//归还
			returnTask() {
				taskApi.returnTask(this.taskId).then(response => {
					toast("归还成功")
					this.$emit("returnCallBack")
				})
			},

			//审批记录
			record() {
				this.$refs.processRecordRef.open(this.processInstanceId)
			}
		}
	}
</script>

<style scoped>
	.btn-contant {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
		padding: 10rpx;
	}

	uni-button {
		width: 180rpx;
		height: 65rpx;
		line-height: 65rpx;
		font-size: 28rpx;
	}
</style>
